<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <script src="./vue.min.js"></script>
</head>
<body>
<h1>v-if/v-show/v-for</h1>
<div id="test1">
    <button @click="toggleFun">Toggle</button>
    <div v-if="show">hello world! v-if</div>
    <div v-show="show">hello world! v-show</div>

    <ul>
        <li v-for="(item, index) of list" :key="index">{{index}}.{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#test1",
        data: {
            show: true,
            list: ["v-for", "Sunday", "Monday", "啦啦啦", "啦啦啦", "我是卖报的小行家"]
        },
        methods: {
            toggleFun: function () {
                this.show = !this.show
            }
        }
    })
</script>
<h1>todo list 小练习</h1>
<div id="test2">
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ol>
        <li v-for="(item, index) of todoList" :key="index">{{item}}</li>
    </ol>
</div>
<script>
    new Vue({
        el: "#test2",
        data: {
            inputValue: "",
            todoList: []
        },
        methods: {
            handleSubmit: function () {
                this.todoList.push(this.inputValue)
                this.inputValue = ""
            }
        }
    })
</script>
<h1>todo list 小练习 组件化</h1>
<div id="test3">
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ol>
        <todo-item
                v-for="(item, index) of todoList"
                :content="item"
                :index="index"
                :key="index"
                @delete="handleDelete">
            {{item}}
        </todo-item>
    </ol>
</div>
<script>
    // // 局部组件
    // var todoItem = {
    //     template: '<li>item</li>'
    // }
    // new Vue({
    //     components: {
    //         "todo-item": todoItem,
    //         "todo-item2": {
    //             template: '<li>item2</li>'
    //         }
    //     }
    // })


    // 全局组件（其实组件就是一个vue实例）
    Vue.component("todo-item", {
        props: ["content", "index"],
        template: '<li @click="handleClick">{{content}} <span @click="handleDelete">删除此项</span></li>',
        methods: {
            handleClick: function () {
                alert("组件也可以绑定事件以及定义方法！")
            },
            handleDelete: function () {
                this.$emit("delete", this.index)
            }
        }
    })


    new Vue({
        el: "#test3",
        data: {
            inputValue: "",
            todoList: []
        },
        methods: {
            handleSubmit: function () {
                this.todoList.push(this.inputValue)
                this.inputValue = ""
            },
            handleDelete: function (index) {
                alert(index)
                this.todoList.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>